import React, { Component } from 'react'
// import Dad from './pages/Dad'
import Game from './pages/Game/Game'
import Event from './pages/Event/event'
import { ChakraProvider, Button } from '@chakra-ui/react'
import { Routes, Route } from 'react-router'
import { HashRouter, NavLink } from 'react-router-dom'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      data: 100000
    }
  }
  
  componentWillMount() {
    console.log('componentWillMount----挂载前');
  }

  componentDidMount() {
    console.log('componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用');
  }

  componentWillDidUpdate() {
    console.log('componentWillDidUpdate');
  }

  componentDidUpdate() {
    console.log('componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount, 清除 timer, 取消网络请求或清除');
    
  }



  render() {
    const { data } = this.state
    return (
      <ChakraProvider>
        <HashRouter>
          <NavLink to="/game">
            <Button>GoHome</Button>
          </NavLink>
          <NavLink end to="/event">
            <Button>猫捉老鼠</Button>
          </NavLink>
          {/* 路由组件 */}
          <Routes>
            <Route element={<Game />}  path="/game"></Route>
            <Route element={<Event />}  path="/event"></Route>
          </Routes>
        </HashRouter>
        
          {/* 理想工资: {data}
          <button onClick={() => {
            this.setState({
              data: data * 10
            })
          }}>加钱</button>
          <hr></hr>
          <Dad>
          </Dad> */}
      </ChakraProvider>
    )
  }
}
